<template>
	<view class="order">
		<NavBar :isBack="true">
			<template #left>
				<view class="input">
					<image src="@/static/icons/search.png"></image>
					<input type="text" placeholder-class="placeholder" placeholder="搜索订单关键词或订单号" />
				</view>
			</template>
		</NavBar>
		<view class="content">
			<Tabs :tabs="tabs" @change="handleTabsChange" :active="form.type"></Tabs>
			<div class="orderList">
				<up-empty v-if="!list.length" mode="order"></up-empty>
				<view class="item" v-for="(item, index) in list" :key="index">
					<view class="header">
						<view class="title">
							<image src="@/static/order/flag.png"></image>
							<view>服务点：{{ item.servers?.title }}</view>
						</view>
						<view class="status">{{ types[item.status] }}</view>
					</view>
					<view class="middle" @click="$gotoUrl('/pages/order/orderDetail?id=' + item.id)">
						<image src="@/static/goodDetail/demo.png"></image>
						<view class="specific-msg">
							<view class="title">
								<view>{{ item.shops.title }}</view>
								<view class="num">x{{ item.num }}</view>
							</view>
							<view class="order-num">订单号：{{ item.orderid }}</view>
							<view class="price">¥ {{ item.shops?.price }}</view>
						</view>
					</view>
					<view class="footer" @click.stop>
						<view class="hurdle">
							<view>实付款</view>
							<view class="price">¥ {{ item.paymoney }}</view>
						</view>
						<view class="btn" v-if="item.status === 0" @click="$gotoUrl('/pages/order/orderDetail?id=' + item.id)">去付款
						</view>
						<view class="btn" v-if="item.status === 2" @click="handleuserConfirm(item.id)">确认收货</view>
						<view class="btn" v-if="item.status === 3" @click="$gotoUrl('/pages/index/goodDetail?id=' + item.shops?.id)">
							再来一单
						</view>
					</view>
				</view>
				<!-- <GoodsItem :daliyList="daliyList" title="更多精选商品" /> -->
			</div>
		</view>
	</view>
</template>

<script setup>
import Tabs from '@/components/Tabs.vue';
import GoodsItem from '@/pages/order/components/goodsItem'
import { getOrderList, getInspirationalitemsList, userConfirm } from '@/api/order'
import { onReachBottom } from "@dcloudio/uni-app"
import {
	reactive,
	onBeforeMount,
	toRefs
} from 'vue'
const state = reactive({
	search: "",
	types: {
		0: "待付款",
		1: "待发货",
		2: "待收货",
		3: "已完成",
		6: "退款审核中"

	},
	tabs: [{
		label: "全部",
		value: 'all'
	},
	{
		label: "待付款",
		value: '0'
	},
	{
		label: "待发货",
		value: '1'
	}, {
		label: "待收货",
		value: '2'
	},
	{
		label: "已完成",
		value: '3'
	}
	],
	form: {
		type: 'all',
		page: 1,
		limit: 10
	},

	list: [],
	daliyList: []
})
//切换tab
function handleTabsChange (item) {
	state.list = []
	state.form.page = 1
	state.form.type = item.value
	getList()
}
//获取列表
async function getList () {
	uni.showLoading({ title: '加载中' });
	const res = await getOrderList(state.form)
	const nodes = res.data?.data || []
	state.list = state.list.concat(nodes)
	uni.hideLoading();
	// state.list.length && getDaliyList(state.list[0].shops.title)
}
//更多好物
async function getDaliyList (title) {
	const res = await getInspirationalitemsList({ type: 1, page: 1, limit: 4, title })
	state.daliyList = res.data.data
}
//确认收货
function handleuserConfirm (id) {
	userConfirm({ id }).then(res => {
		uni.showToast({ title: "收货成功" })
		getList()
	})

}
//初始化
onBeforeMount(() => {
	getList()
})
//触底加载更多
onReachBottom(() => {
	state.form.page += 1
	getList()
	console.log("触底了")
})
const {
	types,
	list,
	tabs,
	form,
	daliyList
} = toRefs(state)
</script>

<style lang="scss" scoped>
.order {
	.nav {
		width: 750rpx;
		height: 88rpx;
		display: flex;
		align-items: center;

		.back {
			width: 80rpx;
			height: 80rpx;
		}

		.input {
			display: flex;
			align-items: center;
			padding: 5rpx 17rpx;
			width: 450rpx;
			height: 58rpx;
			background: #FEFEFE;
			border-radius: 55rpx;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 10rpx;
			}

			input {
				font-size: 24rpx;
			}
		}

		.placeholder {
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
		}
	}

	.content {
		padding: 36rpx;

		:deep(.tabs) {
			display: flex;
			justify-content: space-between;

			.tab {
				font-size: 26rpx;
			}

			.active {
				font-size: 30rpx;
			}
		}

		.orderList {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: calc(100vh - 136px);
			margin-top: 36rpx;

			.item {
				margin-bottom: 36rpx;
				width: 678rpx;
				height: 524rpx;
				background: #FFFFFF;
				border-radius: 22rpx 22rpx 22rpx 22rpx;
				padding: 30rpx;
				box-sizing: border-box;

				.header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-bottom: 36rpx;
					border-bottom: 1rpx solid #F5F5F5;

					.title {
						display: flex;
						align-items: center;
						font-weight: bold;
						font-size: 30rpx;
						color: #333333;
					}

					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 16rpx;
					}

					.status {
						font-weight: 400;
						font-size: 24rpx;
						color: #58DBCF;
					}
				}

				.middle {
					display: flex;
					padding: 32rpx 0rpx;
					border-bottom: 1rpx solid #F5F5F5;
					position: relative;

					image {
						width: 155rpx;
						height: 155rpx;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						margin-right: 24rpx;
					}

					.specific-msg {

						.title {
							display: flex;
							align-items: center;
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;

							.num {
								position: absolute;
								right: 0rpx;
								font-weight: 500;
								font-size: 24rpx;
								color: #666666;
							}
						}

						.order-num {
							font-weight: 500;
							font-size: 20rpx;
							color: #999999;
							margin: 8rpx 0rpx 40rpx;
						}

						.price {
							font-weight: 800;
							font-size: 30rpx;
							color: #333333;
						}
					}
				}

				.footer {
					margin-top: 30rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-end;

					.hurdle {
						font-weight: 500;
						font-size: 30rpx;
						color: #333333;
						display: flex;
						align-items: center;
						margin-bottom: 30rpx;

						.price {
							font-weight: 800;
							color: #FF0000;
							margin-left: 8rpx;
						}
					}

					.btn {
						text-align: center;
						font-weight: bold;
						font-size: 30rpx;
						color: #58DBCF;
						width: 192rpx;
						height: 66rpx;
						line-height: 68rpx;
						border-radius: 500rpx 500rpx 500rpx 500rpx;
						border: 1rpx solid #58DBCF;
					}
				}
			}
		}

	}
}
</style>